<template>
	<view>
		<view class="classdetail u-p-30 u-m-tb-30" v-for="i in classlist" >
			<view class="flex-between">
				<text>班级代码</text>
				<text class="u-font-44" >{{i.id}}</text>
			</view>
			<view class="nlbox flex-a-c">
				<view class="nlbox_item flex-center" v-for="item in i.abilityList">
					<view class="u-m-tb-30">{{item.abilityName}}</view>
					<view class="u-m-tb-30">{{item.abilityValue}}</view>
				</view>
			</view>
		</view>
		
		<u-empty v-if="classlist.length==0" ></u-empty>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				classlist:[]
			};
		},
		onLoad() {
			this.init()
		},
		methods:{
			init(){
				this.$api.get('/ability/xClassAbility/classAbility',{}).then(res=>{
					this.classlist = res.data
				})
			},
		}
	}
</script>

<style lang="scss">
.classdetail{
	background-color: #fff;
}
.nlbox{
	
	.nlbox_item{
		flex-direction: column;
		&:nth-child(n+2){
			margin-left: 50rpx;
		}
	}
}
</style>
